<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北化家里蹲图书馆登陆界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/css/login.css">
    <script src="/static/js/formflash.js"></script>
    <link rel="stylesheet" href="/static/css/main.css">
    <style type="text/css" >
        .carousel-inner img{
            height: 500px;

        }
        .page-head{
            height: 70px;
        }
        .logo{
            height: 30px;
        }
        .lib-title {

            color: transparent;
            -webkit-background-clip: text;
            line-height: 30px;
            font-size: 25px;
            background-image: linear-gradient(to right, #7BC6CC, #BE93C5);

        }
        .row{
            margin-bottom: 20px;
        }

        .main-container{

            background:#fffef9;
            border-radius: 15px;
            width: 100%;
            padding: 20px;
             box-shadow: 0 0 50px 0 rgba(146, 146, 146, 0.63);

        }
        .panel-footer{
            color: gray;
            font-size: 10px;
            text-align: center;
            margin: 0 auto;
            width: 500px;
            line-height: 30px;

        }
    </style>
</head>
<body class="container ">
        <div class=" main-container">


        <!--图片轮播-->
        <div class="row page-head">
            <img class="logo col-sm-1" src="/static/img/icons/lib.svg" alt="图书馆图标"/>
            <span class=" lib-title col-sm-6" >北京化工大学图书馆图书管理系统</span>
        </div>
        <div class=" row">
            <div id="carouselExampleIndicators" class="carousel slide col-sm-8" data-ride="carousel">
                 <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                </ol>
                  <div class="carousel-inner">
                        <div class="carousel-item active">
                          <img class="d-block w-100"  src="/static/img/lib1.jpg" alt="First slide">
                        </div>
                        <div class="carousel-item">
                          <img class="d-block w-100" src="/static/img/lib2.jpg" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                          <img class="d-block w-100" src="/static/img/lib3.jpg" alt="Third slide">
                        </div>
                           <div class="carousel-item">
                          <img class="d-block w-100" src="/static/img/lib4.jpg" alt="Third slide">
                        </div>
                    </div>


              <a class="carousel-control-prev " href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next " href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
    <div class="login-box offset-sm-1 col-sm-3">
        <p class="login-header" >用户登入</p>
        <form method="post" class="form-wrapper" action="/login/">
            {% csrf_token %}
           &nbsp;<input class="input-item act" type="text" value="{{ Account }}" name="AccountID" placeholder="用户名/手机号/邮箱" required>
            <p class="msg" id="actInfo" style="color: #b92c28; font-size: 15px;" > {{ noAccount }} </p>

         &nbsp;&nbsp; <input class="input-item pwd" type="password" value="{{ pwd }}" name="Password" placeholder="密码" required>
           <p class="msg" id="pwdInfo" style="color: #b92c28; font-size: 15px;" > {{ pwdWrong }} </p>
            <input  type="submit" id="subbnt" class="btn" value="登录">

            <p class="msg">
                 还没注册？<a href="/register/">注册</a>
            </p>
        </form>

    </div>
    </div>
            </div>
        <p class="panel-footer">版权所有© Copyright 1999-2020 yzzer工作室　中国 北京市昌平区南口镇南涧路29号</p>

 <script>

        $(document).ready(function () {
            let noAct = "{{ noAccount }}";
            let pwdErr = "{{ pwdWrong }}";
            console.log(noAct)
            if (noAct != "")
                flash(".act",8,10,100);
            if (pwdErr != "")
                flash(".pwd",8,10,100);
            $('.carousel').carousel({
              interval: 5000
            })
            $('.btn').click(function () {
                setTimeout(function () {
                    flash(this,8,10,100);

                },300)
            })

        });


    </script>
</body>
</html>
